<template>
	<view class="mine-wrapper">
		<top-nav :background="{
					backgroundColor:'#202020',
					borderColor:'#202020',
				}">
			<view class="top-nav-content">
				<view class="name">个人中心</view>
			</view>
			
		</top-nav>
		<view class="top">
			<view class="float" @click="gotoShare()">
				<view class="float-content">
					<view class="qrcode"></view>
				</view>
			</view>
			<view class="avatar">
				<view class="status" :class="state==0?'status1':'status2'"></view>
				<view class="avatar-content">
					B
					<!-- <u-image width="100%" height="100%" :src="avatar"></u-image>	 -->
				</view>
			</view>
			<view class="name">{{userInfo.name}}</view>
			<view class="id">ID：{{userInfo.invite_code}}</view>
		</view>
		<view class="info-content">
			<view class="list" @click="gotoPage('/pages/mine/editInfo')">
				<view class="icon icon1"></view>
				<view class="name">个人资料</view>
				<view class="place">{{userInfo.isok==0?'未完善':'已完善'}}</view>
				<view class="right-icon"></view>
			</view>
			<view class="list" @click="gotoPage('/pages/mine/message')">
				<view class="icon icon2"></view>
				<view class="name">消息中心</view>
				<view class="place">{{userInfo.info_usnread}}条未读</view>
				<view class="right-icon"></view>
			</view>
			<view class="list" @click="gotoPage('/pages/safe/safe')">
				<view class="icon icon3"></view>
				<view class="name">安全设置</view>
				<view class="right-icon"></view>
			</view>
			<view class="list" @click="gotoPage('/pages/mine/property')">
				<view class="icon icon4"></view>
				<view class="name">资产管理</view>
				<view class="right-icon"></view>
			</view>
			<view class="list" @click="gotoPage('/pages/rule/rule')">
				<view class="icon icon5"></view>
				<view class="name">平台规则</view>
				<view class="right-icon"></view>
			</view>
			<view class="list" @click="gotoPage('/pages/team/team')">
				<view class="icon icon7"></view>
				<view class="name">我的团队</view>
				<view class="right-icon"></view>
			</view>
			<view class="list">
				<view class="icon icon6"></view>
				<view class="name">安全退出</view>
			</view>
		</view>
		<bottom-nav :currentIndex="4"></bottom-nav>
	</view>
</template>

<script>
	import topNav from '../../components/top-nav/top-vue.vue';
	import bottomNav from '../../components/bottom-nav/bottom-nav.vue';
	export default{
		components:{
			topNav:topNav,
			bottomNav:bottomNav
		},
		onShow() {
			this.getUserInfo();
			this.$u.post('/api/getUserState', {account_id:uni.getStorageSync('account_id')}).then(res=>{
				if(res.code==200){
					this.state = res.data.state;
				} else {
					this.$refs.uToast.show({
						title: res.message,
						type: 'error',
					})
				}
			})
		},
		methods:{
			getUserInfo(){
				this.$u.post('/api/userInfo', {account_id:uni.getStorageSync('account_id')}).then(res=>{
					if(res.code==200){
						this.userInfo = res.data;
						uni.setStorageSync('userInfo',this.userInfo)
					} else {
						this.$refs.uToast.show({
							title: res.message,
							type: 'error',
						})
					}
				})
			},
			gotoShare(){
				uni.navigateTo({
				    url: '/pages/share/share'
				});
			},
			gotoPage(path){
				if(path){
					uni.navigateTo({
					    url: path
					});
				}
			}
		},
		data(){
			return {
				userInfo:{
					avatar:''
				},
				state:0,
				team:[
					{
						avatar: '',
						name:'Monica Carlitas',
						desc:'m.c@tooploox.com',
						label: 1
					},
					{
						avatar: '',
						name:'Monica Carlitas',
						desc:'m.c@tooploox.com',
						label: 2
					},
					{
						avatar: '',
						name:'Monica Carlitas',
						desc:'m.c@tooploox.com',
						label: ''
					},
					{
						avatar: '',
						name:'Monica Carlitas',
						desc:'m.c@tooploox.com',
						label: ''
					},
					{
						avatar: '',
						name:'Monica Carlitas',
						desc:'m.c@tooploox.com',
						label: ''
					},
					{
						avatar: '',
						name:'Monica Carlitas',
						desc:'m.c@tooploox.com',
						label: ''
					},
					{
						avatar: '',
						name:'Monica Carlitas',
						desc:'m.c@tooploox.com',
						label: ''
					},
					{
						avatar: '',
						name:'Monica Carlitas',
						desc:'m.c@tooploox.com',
						label: ''
					},
					{
						avatar: '',
						name:'Monica Carlitas',
						desc:'m.c@tooploox.com',
						label: ''
					}
				]
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mine-wrapper{
		padding:0 20*2rpx 130rpx;
		height:100%;
		box-sizing: border-box;
		.top-nav-content{
			padding:20*2rpx;
			.name{
				font-size:24*2rpx;
			}
		}
		.top{
			position: relative;
			padding-top:40*2rpx;
			.avatar{
				width:78*2rpx;
				height:78*2rpx;
				box-shadow: 0px 0px 4px 0px rgba(141, 180, 255, 0.5);
				background: linear-gradient(225deg, rgba(255, 220, 94, 1), rgba(101, 255, 93, 1), rgba(255, 220, 94, 1));
				padding: 4rpx;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				margin:0 auto 20*2rpx;
				position:relative;
				.status{
					width:44*2rpx;
					height:17*2rpx;
					background-size: 100% 100%;
					position:absolute;
					top: -10rpx;
					right: -40*2rpx;
					&.status1{
						background-image: url('/static/mine/icon8.png');
					}
					&.status2{
						background-image: url('/static/mine/icon9.png');
					}
				}
				.avatar-content{
					width: 100%;
					height:100%;
					overflow: hidden;
					border-radius: 50%;
					background-color: #000;
					color:#fff;
					align-items: center;
					display: flex;
					justify-content: center;
					font-size:48rpx;
				}
			}
			.name{
				font-size:24*2rpx;
				text-align:center;
				margin-bottom:14rpx;
			}
			.id{
				font-size:16*2rpx;
				opacity: 0.6;
				text-align: center;
			}
			.float{
				position:absolute;
				width: 65*2rpx;
				height:46*2rpx;
				border-top-left-radius: 46rpx;
				border-bottom-left-radius: 46rpx;
				right:-20*2rpx;
				top:16rpx;
				box-shadow: 0px 15px 40px 0px rgba(117, 117, 170, 0.1);
				z-index: 9;
				background: #fff;
				border: 1px solid #fff;
				.float-content{
					width:34*2rpx;
					height:34*2rpx;
					background: linear-gradient(257deg, #FFB721 0%, #69DA73 100%);
					box-shadow: 0px 20px 40px 0px rgba(62, 65, 247, 0.13), 0px 4px 8px 0px rgba(27, 28, 88, 0.2);
					left:12rpx;
					top:50%;
					margin-top:-34rpx;
					position:absolute;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					.qrcode{
						width:50%;
						height:50%;
						background-image: url('/static/mine/qrcode.png');
						background-size: 50% 50%;
						background-position: center;
					}
				}
			}
		}
		.info-content{
			width:100%;
			background: rgba(51,51,51,0.29);
			border-radius: 10*2rpx;
			margin:20rpx auto 30rpx;
			padding-bottom:50*2rpx;
			.list{
				display: flex;
				height:46*2rpx;
				padding:0 22*2rpx;
				align-items: center;
				color:#69DA73;
				.name{
					font-size:14*2rpx;
					flex:1;
				}
				.icon{
					width:18*2rpx;
					height:18*2rpx;
					margin-right:20*2rpx;
					background-size: 100% 100%;
					&.icon1{
						background-image: url('/static/mine/icon1.png');
					}
					&.icon2{
						background-image: url('/static/mine/icon2.png');
					}
					&.icon3{
						background-image: url('/static/mine/icon3.png');
					}
					&.icon4{
						background-image: url('/static/mine/icon4.png');
					}
					&.icon5{
						background-image: url('/static/mine/icon5.png');
					}
					&.icon6{
						background-image: url('/static/mine/icon6.png');
					}
					&.icon7{
						background-image: url('/static/mine/icon7.png');
					}
				}
				&:not(:last-child){
					border-bottom:1px solid rgba(255,255,255,0.1)
				}
				.right-icon{
					width: 0;
					height: 0;
					border-top: 10rpx solid transparent;
					border-left: 12rpx solid #FFFFFF;
					border-bottom:10rpx solid transparent;
					margin:0 20rpx;
				}
			}
		}
	}
</style>
